<!-- 页面外套 -->
<div class="page-wrapper" id="personnel_attendance_punch_record">
    
    <!-- 数据网格 -->
    <div class="datagrid datagrid-striped" id="personnel_attendance_punch_record_datagrid">

        <!-- 工具条组 -->
        <div class="tool-group">
            <div class="tool-search">
                <div class="im-label">
                    <div class="input-group">
                        <select class="form-control" id="personnel_attendance_punch_record_tool_keys">
                            <option value="1">姓名</option>
                            <option value="2">工号</option>
                        </select>
                        <span class="input-group-addon fix-border fix-padding"></span>
                        <input type="text" class="form-control" id="personnel_attendance_punch_record_tool_search">
                    </div>
                </div>
                <label id="personnel_attendance_punch_record_tool_select_group"><!--JS推进--></label>
                <label>
                    <span>在职状态：</span>
                    <select class="form-control" id="personnel_attendance_punch_record_tool_select3"><!--JS推进--></select>
                </label>
                <div class="im-label" id="personnel_attendance_punch_record_tool_date"><!--JS推进--></div>
                <label><button class="btn btn-primary" id="personnel_attendance_punch_record_search_btn"><i class="icon icon-search"></i> 搜索</button></label>
                <div class="clearfix"></div>
            </div>
            <div class="tool-deal">
                <label><button class="btn btn-primary" id="personnel_attendance_punch_record_export_btn"><i class="icon icon-external-link"></i> 导出</button></label>
                <div class="clearfix"></div>
            </div>
        </div>
        <!-- tool-group -->

        <div class="datagrid-container"></div>
        <ul class="pager btn-mini" data-elements="prev,pages,next"></ul>
    </div>
    <!-- datagrid -->

    <!-- 打卡照片 -->
    <div class="modal modal-for-page fade" aria-hidden="false" id="personnel_attendance_punch_record_statistic_box">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">打卡照片</h4>
                </div>
                <div class="modal-body">
                    <div class="container text-center">
                        <img src=""><!-- JS推进-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- personnel_attendance_punch_record_statistic_box -->

</div>
<!-- page-wrapper -->

<script>
$(function(){

    //变量声明-----------------------------------------------------------------------------------------------
    var
    personnel_attendance_punch_record                    = $("#personnel_attendance_punch_record"),                     //页面ID
    personnel_attendance_punch_record_datagrid           = $("#personnel_attendance_punch_record_datagrid"),            //数据表格
    //搜索
    personnel_attendance_punch_record_tool_keys          = $("#personnel_attendance_punch_record_tool_keys"),           //搜索类别
    personnel_attendance_punch_record_tool_search        = $("#personnel_attendance_punch_record_tool_search"),         //搜索字段
    personnel_attendance_punch_record_tool_select_group  = $("#personnel_attendance_punch_record_tool_select_group"),   //下拉框组
    personnel_attendance_punch_record_tool_select3       = $("#personnel_attendance_punch_record_tool_select3"),        //下拉选择2
    personnel_attendance_punch_record_tool_date          = $("#personnel_attendance_punch_record_tool_date"),           //起止时间
    personnel_attendance_punch_record_search_btn         = $("#personnel_attendance_punch_record_search_btn"),          //搜索按钮
    personnel_attendance_punch_record_export_btn         = $("#personnel_attendance_punch_record_export_btn");          //导出按钮

    //接口对象-----------------------------------------------------------------------------------------------
    if( window.STATE == "local" ){

        //本地接口
        var personnel_attendance_punch_record_api = {
            datagrid  : LOCAL + "Test/Personnel/Attendance/punch_record.json",                           //数据表格
            select    : LOCAL + "Test/test_select.json",                                            //下拉选择
        }

    } else if ( window.STATE == "route" ){

        //远程接口
        var personnel_attendance_punch_record_api = {
            datagrid  : LOCAL + "Test/Personnel/Attendance/punch_record.json",                           //数据表格
            select    : LOCAL + "Test/test_select.json",                                            //下拉选择
        }

    }

    //数据表格-----------------------------------------------------------------------------------------------
    personnel_attendance_punch_record_datagrid.datagrid({
        height      : zui_datagrid_height(personnel_attendance_punch_record_datagrid),
        sortable    : false,
        cache       : false,
        showRowIndex: true,
        configs     : {
            R0:{className:"text-center"},
            C1:{className:"cell-hidden"}
        },
        states      : {
            fixedLeftUntil  : 3,
            pager           : {
                page        : 1,
                recPerPage  : window.REC_PER_PAGE,
            }
        },
        dataSource : {
            cols   : [
                {width:49, name:"id",         label:"ID"      },
                {width:80, name:"user",       label:"姓名"    },
                {width:80, name:"number",     label:"工号"    },
                {width:80, name:"depart",     label:"部门"    },
                {width:80, name:"post",       label:"职位"    },
                {width:90, name:"attend_date",label:"考勤日期"},
                {width:160,name:"attend_time",label:"考勤时间"},
                {width:80, name:"punch_time", label:"打卡时间"},
                {width:190,name:"punch_resu", label:"打卡结果"},
                {width:200,name:"punch_addr", label:"打卡地址"},
                {width:200,name:"punch_text", label:"打卡备注"},
                {width:80, name:"punch_equi", label:"打卡设备"},
                {width:80, name:"punch_jpeg", label:"打卡照片",html:true,
                    valueOperator : {
                        getter : function(dataValue,cell){
                            $("#personnel_attendance_punch_record_statistic_box img").attr("src",dataValue);
                            return '<a data-toggle="modal" title="点击查看" data-target="#personnel_attendance_punch_record_statistic_box">查看</a>';
                        }
                    }
                },
            ],
            remote : function(){
                return {
                    url     : personnel_attendance_punch_record_api.datagrid,
                    type    : "POST",
                    dataType: "json",
                }
            }
        }
    });//datagrid()

    //变量声明-----------------------------------------------------------------------------------------------
    var 
    personnel_attendance_punch_record_datagrid_obj    = personnel_attendance_punch_record_datagrid.data("zui.datagrid"),//表格对象
    personnel_attendance_punch_record_result_edit_btn = ".personnel_attendance_punch_record_result_edit_btn";           //修改按钮

    //时间组件-----------------------------------------------------------------------------------------------
    common_date_duration( personnel_attendance_punch_record_tool_date );
    personnel_attendance_punch_record_tool_date.find(".start").datetimepicker(option_date);
    personnel_attendance_punch_record_tool_date.find(".end").datetimepicker(option_date);
    
    //下拉选项-----------------------------------------------------------------------------------------------
    common_select_linkage("#personnel_attendance_punch_record_tool_select_group","1");                                  //搜索

    //在职状态
    $.ajax({
        url     : personnel_attendance_punch_record_api.select,
        type    : "post",
        dataType: "json",
        data    : {},
        success : function(data){
            if( data.status>0 ){
                var data = data.data;
                var option = "<option value='0'>全部</option>";
                for(var i=0;i<data.length;i++){
                    option += "<option value='"+data[i].id+"'>"+data[i].name+"</option>"
                }
                personnel_attendance_punch_record_tool_select3.html(option);
            }
        }
    });

    //搜索按钮-----------------------------------------------------------------------------------------------
    personnel_attendance_punch_record_search_btn.click(function(){

        //字段整理
        var keyword
        = "?sid="    + personnel_attendance_punch_record_tool_keys.val()
        + "&search=" + personnel_attendance_punch_record_tool_search.val()       
        + "&depart=" + personnel_attendance_punch_record_tool_select_group.find(".common_select_depart").val()
        + "&state="  + personnel_attendance_punch_record_tool_select3.val()
        + "&date1="  + personnel_attendance_punch_record_tool_date.find(".start").val()
        + "&date2="  + personnel_attendance_punch_record_tool_date.find(".end").val();

        //GET提交
        zui_datagrid_render(personnel_attendance_punch_record_datagrid_obj,personnel_attendance_punch_record_api.datagrid+keyword);

    });

    //导出按钮-----------------------------------------------------------------------------------------------
    personnel_attendance_punch_record_export_btn.click(function(){

        //远程提交
        $.ajax({
            url     : API.test_response,
            type    : "post",
            dataType: "json",
            data    : {
                keys    : personnel_attendance_punch_record_tool_keys.val(),
                search  : personnel_attendance_punch_record_tool_search.val(),
                depart  : personnel_attendance_punch_record_tool_select_group.find(".common_select_depart").val(),
                state   : personnel_attendance_punch_record_tool_select3.val(),
                date1   : personnel_attendance_punch_record_tool_date.find(".start").val(),
                date2   : personnel_attendance_punch_record_tool_date.find(".end").val(),
            },
            beforesend : function(){
                um_tip("导出中…");
            },
            success : function(data){
                if( data.status>0 ){
                    window.open(API.test_export);
                } else {
                    um_tip(data.message,"1500","text-danger");
                }
            }
        });

    });

});//预加载结尾
</script>